<template>
  <div class="upload-settings">
    <div class="settings-header">
      <h3>上传设置</h3>
      <a-button type="primary" @click="openSettingsModal" v-if="isAdmin">
        <template #icon><setting-outlined /></template>
        设置
      </a-button>
    </div>

    <div class="settings-info">
      <div class="setting-item">
        <span class="setting-label">文件大小限制：</span>
        <span class="setting-value">{{ maxFileSizeMB }}MB</span>
      </div>
    </div>

    <!-- 设置模态框 -->
    <a-modal 
      v-model:open="settingsModalVisible" 
      title="上传设置" 
      @ok="handleUpdateSettings" 
      @cancel="resetSettingsForm"
      :confirm-loading="updating"
    >
      <a-form :model="settingsForm" :rules="settingsRules" ref="settingsFormRef">
        <a-form-item label="文件大小限制" name="maxFileSizeMB">
          <a-input-number
            v-model:value="settingsForm.maxFileSizeMB"
            :min="1"
            :max="1024"
            :step="1"
            placeholder="请输入文件大小限制"
            style="width: 100%"
          >
            <template #addonAfter>MB</template>
          </a-input-number>
          <div class="form-hint">
            建议设置范围：1MB - 1024MB，过大的文件可能影响服务器性能
          </div>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { SettingOutlined } from '@ant-design/icons-vue'
import { useFileStorageStore } from '@/stores/fileStorage'
import { useUserStore } from '@/stores/user'

// 使用store
const fileStorageStore = useFileStorageStore()
const userStore = useUserStore()

// 响应式数据
const settingsModalVisible = ref(false)
const updating = ref(false)
const settingsFormRef = ref()
const maxFileSizeMB = ref(100) // 默认100MB

// 表单数据
const settingsForm = ref({
  maxFileSizeMB: 100
})

// 表单验证规则
const settingsRules = {
  maxFileSizeMB: [
    { required: true, message: '请输入文件大小限制', trigger: 'blur' },
    { type: 'number', min: 1, max: 1024, message: '文件大小限制范围为1-1024MB', trigger: 'blur' }
  ]
}

// 计算属性
const isAdmin = computed(() => {
  return userStore.isAuthenticated && (userStore.user?.username === 'woaichitudouo' || userStore.user?.username === 'woaichitudou')
})

// 方法
const loadUploadSettings = async () => {
  try {
    const settings = await fileStorageStore.getUploadSettings()
    maxFileSizeMB.value = settings.maxFileSizeMB
    settingsForm.value.maxFileSizeMB = settings.maxFileSizeMB
  } catch (error) {
    console.error('加载上传设置失败:', error)
    // 使用默认值
    maxFileSizeMB.value = 100
    settingsForm.value.maxFileSizeMB = 100
  }
}

const openSettingsModal = () => {
  settingsForm.value.maxFileSizeMB = maxFileSizeMB.value
  settingsModalVisible.value = true
}

const handleUpdateSettings = async () => {
  try {
    await settingsFormRef.value.validate()
    updating.value = true

    await fileStorageStore.updateUploadSettings({
      maxFileSizeMB: settingsForm.value.maxFileSizeMB
    })

    maxFileSizeMB.value = settingsForm.value.maxFileSizeMB
    message.success('上传设置更新成功')
    settingsModalVisible.value = false
  } catch (error) {
    if (error.errorFields) {
      // 表单验证错误
      return
    }
    message.error(error.message || '更新设置失败')
  } finally {
    updating.value = false
  }
}

const resetSettingsForm = () => {
  settingsForm.value.maxFileSizeMB = maxFileSizeMB.value
  settingsFormRef.value?.resetFields()
  settingsModalVisible.value = false
}

// 生命周期
onMounted(() => {
  loadUploadSettings()
})
</script>

<style scoped>
.upload-settings {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.settings-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

.settings-info {
  padding: 8px 0;
}

.setting-item {
  display: flex;
  align-items: center;
  padding: 4px 0;
}

.setting-label {
  font-size: 14px;
  color: #595959;
  margin-right: 8px;
}

.setting-value {
  font-size: 14px;
  color: #262626;
  font-weight: 500;
}

.form-hint {
  font-size: 12px;
  color: #8c8c8c;
  margin-top: 4px;
  line-height: 1.4;
}
</style>